<template>
  <el-popover placement="bottom" width="260" trigger="click">
    <div style="padding: 0.5em 1em">
      <h3><i class="el-icon-set-up" style="margin-right:0.5em"></i>过滤</h3>
      <el-form label-width="50px">
        <el-form-item label="科室">
          <el-select
            v-model="filterContent.clientOffice"
            multiple
            collapse-tags
            placeholder="请选择"
            @change="emit"
          >
            <el-option
              v-for="(item, index) in clientOffice"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资质">
          <el-select
            v-model="filterContent.clientRank"
            @change="emit"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in clientRank"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="filterContent.rank"
            @change="emit"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in rank"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
        ></el-form-item>
        <el-form-item label="权限">
          <el-select
            v-model="filterContent.level"
            @change="emit"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="item in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关注">
          <el-select
            v-model="filterContent.interest"
            @change="emit"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in [
                { label: '未关注', value: 0 },
                { label: '已关注', value: 1 },
              ]"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="text" @click="selectAll">全选</el-button>
        <el-button type="text" @click="selectNone">清空</el-button>
      </div>
    </div>
    <el-button slot="reference" icon="el-icon-s-operation" circle></el-button>
  </el-popover>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    value: Object,
  },
  data() {
    return {
      filterContent: {
        clientOffice: [],
        clientRank: [],
        rank: [],
        level: [],
        interest: [],
      },
    };
  },
  computed: {
    ...mapState({
      clientOffice: (state) => state.statics.clientOffice,
      clientRank: (state) => state.statics.clientRank,
      rank: (state) => state.statics.rank,
      level: (state) => state.statics.level,
      interestList: (state) => state.statics.interest,
      clientList: (state) => state.clientData.clientList,
    }),
  },
  watch: {
    value(newValue) {
      this.childValue = newValue;
    },
  },
  methods: {
    emit() {
      this.$emit("input", this.filterContent);
    },
    selectAll() {
      this.selectNone();
      //clientOffice
      for (let i = 0; i < this.clientOffice.length; i++) {
        this.filterContent.clientOffice.push(this.clientOffice[i].value);
      }
      //clientRank
      for (let i = 0; i < this.clientRank.length; i++) {
        this.filterContent.clientRank.push(this.clientRank[i].value);
      }
      //rank
      for (let i = 0; i < this.rank.length; i++) {
        this.filterContent.rank.push(this.rank[i].value);
      }
      //level
      this.filterContent.level = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      //interest
      this.filterContent.interest = [0, 1];

      this.emit();
    },
    selectNone() {
      this.filterContent = {
        clientOffice: [],
        clientRank: [],
        rank: [],
        level: [],
        interest: [],
      };
      this.emit();
    },
  },
};
</script>
